<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		
		<!-- Latest compiled and minified CSS -->
		<link rel="stylesheet" type="text/css" href="../../example/html/css/bootstrap.min.css" />
		
		<script src="../../example/html/jquery-3.2.1.min.js" type="text/javascript"></script>
		<script src="../../example/html/bootstrap.min.js" type="text/javascript"></script>
		
		<style>
			body {
				margin: 0px;
				padding: 0px;
				background-color: #EBEBEB;
			}
			
			.top-bar {
				border-bottom: 1px solid black;
				color: white;
				padding-left: 30px;
				padding-top: 10px;
				padding-bottom: 10px;
				background-color: #263238;
			}
			
			.top-bar h3 {
				margin-top: 10px;
			}
			
			.logo {
				float:left; 
				margin-right: 10px;
			}
	
			.content {
				background-color:white;
				padding-top: 10px;
				padding-bottom: 10px;
			}
	
			.contact {
				border-radius: 8px;
				border: 1px solid #263238;
				padding: 10px;
				margin-top: 5px;
			}
			
			.contact-action-column {
				text-align: right;
			}
			
			.contact-table {
				width: 100%;
			}
			
			.contact-row {
				height: 32px;
			}
			
			.contact-action-button {
				width: 110px;
			}
	
			.action-panel {
				background-color: #1FD662;
				margin: 5px 3px 10px 3px;
				border-radius: 8px;
				padding-bottom: 5px;
				padding-top: 0px;
			}
			
			.action-panel-header {
				background-color: #263238;
				color: white;
				padding-left: 10px;
				padding-top: 3px;
				border-top-left-radius: 8px;
				border-top-right-radius: 8px;
			}
			
			#contact-form {
				padding-right:15px;
				margin-top: 5px;
				margin-bottom: 5px;
			}
			
			#contact-form input {
				width: 100%;
				box-sizing: border-box;
				-webkit-box-sizing:border-box;
				-moz-box-sizing: border-box;
			}
			
			.contact-form-label {
				margin-left: 5px;
				padding-left: 20px;
				padding-right: 0px;
				margin-right: 0px;
				font-size: small;
				white-space: nowrap;
			}
			
			.contact-form-field {
				padding-left: 10px;
				margin-left: 30px;
			}
			
			textarea {
				width: 100%;
				resize: none;
			}
			
			#log-panel {
				background-color: #CFD8DC;
			}

			#log-header {
				background-color: #CFD8DC;
			}
			
			#log-header a {.
				text-decoration: none;
				color:grey;
			}
			
			#log-header a:hover {
				text-decoration: none;
			}
			
			#log-header a:after {
				font-family:'Glyphicons Halflings';
				content:"\e114";
				float: right;
				color: grey;
				margin-right: 5px;
			}
			
			#log-header a.collapsed:after {
				content:"\e080";
			}
			
			#log-body {
				padding:0px 10px 3px 10px;
			}
			
			.footer {
				background-color:#EBEBEB;
				margin-top: 0px;
				bottom: 0;
				margin-bottom: 0px;
				width: 100%;
				padding-top: 10px;
				line-height: 40px;
			}
			
			.text {
				position: relative;
				bottom: 0px;
				left: 10px;
				visibility: hidden;
			}
			
			#log-panel:hover .text {
				visibility: visible;
			}
						
		</style>
	
		<script>
			/*
				Remove contact.
			
				Using Data Service endpoint:
					title: Remove contact
					path: /example/contact/{id}
					HTTP method: DELETE
			*/
			function deleteContact(id) {
				$.ajax({url: getUrlPrefix() + "/example/contact/"+id, type: "DELETE", dataType: "json"})
					.done(function(result, textStatus, jqXHR) {
						logHttp(this, jqXHR);
						fetchContacts(); //refresh
					})
					.fail(function(jqXHR, statusTxt, errTxt) {
						logHttp(this, jqXHR);
						var errorMessage = (jqXHR.responseText) ? (jqXHR.responseText) : (errTxt);
						alert(errorMessage); //show error
					});
			}
		
			/*
				Add a new contact.
				
				Values are taken from form (#contact-form) in Add Contact section
				Using Data Service endpoint:
					title: Create contact
					path: /example/contact
					HTTP method: POST
			*/
			function createContact() {
				var contactForm = $("#contact-form");
				var vcard = contactForm.serialize();
				$.ajax({url: getUrlPrefix() + "/example/contact", type: "POST", data: vcard})
					.done(function(result, textStatus, jqXHR) {
						logHttp(this, jqXHR);
						contactForm[0].reset();
						fetchContacts(); //refresh
					})
					.fail(function(jqXHR, statusTxt, errTxt) {
						logHttp(this, jqXHR);
						var errorMessage = (jqXHR.responseText) ? (jqXHR.responseText) : (errTxt);
						alert(errorMessage); //show error
					});
			}
		
			/*
				Import a VCARD contact.
			
				The value is taken from textarea (#vcard-content) in Import VCARD section
				The imported value must be in VCARD format (https://en.wikipedia.org/wiki/VCard)
				Using Data Service endpoint:
					title: Import contact using VCARD
					path: /contact/vcard
					HTTP method: PUT
			*/
			function importVcard() {
				var vcardContent = $("#vcard-content");
				var vcard = vcardContent.val();
				$.ajax({url: getUrlPrefix() + "/example/contact/vcard", type: "PUT", data: vcard, dataType: "text", contentType: "text/vcard"})
					.done(function(result, textStatus, jqXHR) {
						logHttp(this, jqXHR);
						vcardContent.val("");
						fetchContacts(); //refresh
					})
					.fail(function(jqXHR, statusTxt, errTxt) {
						logHttp(this, jqXHR);
						var errorMessage = (jqXHR.responseText) ? (jqXHR.responseText) : (errTxt);
						alert(errorMessage); //show error
					});
			}
			
			/*
				Refresh contacts list.
				
				Loads all contacts using Data Service endpoint
				Using Data Service endpoint:
					title: Get contacts
					path: /example/contacts
					HTTP method: GET
			*/
			function fetchContacts() {
				var divContacts = $("#contacts-list");
				$.ajax({url: getUrlPrefix() + "/example/contacts", type: "GET", dataType: "json"})
					.done(function(result, textStatus, jqXHR) {
						logHttp(this, jqXHR);
						divContacts.empty();
						$.each(result, function (index, contact) {
								divContacts.append(createContactDiv(
									contact.id,
									contact.first_name,
									contact.last_name,
									contact.email,
									contact.phone
								));
							}
						);
					})
					.fail(function(jqXHR, statusTxt, errTxt) {
						logHttp(this, jqXHR);
						var errorMessage = (jqXHR.responseText) ? (jqXHR.responseText) : (errTxt);
						alert(errorMessage); //show error
					});
			}
			
			/*
				Create <div> element for contact.
			*/
			function createContactDiv(id,firstName, lastName, email, phone) {
				var div = document.createElement("div");
				div.id="contact-"+id;
				div.className = "contact";
				div.innerHTML =
					"<table class='contact-table'>" +
						"<tr class='contact-row'>" +
							"<td style='width:100px'>First name:</td>" +
							"<td><strong>" + firstName + "</strong></td>" +
							"<td class='contact-action-column'>" +
								"<button class='contact-action-button' title='Delete contact by calling endpoint at /example/contact/{id} with the contacts ID as the parameter' type='button' onclick='deleteContact(" + id + ");'>" +
									"<span class='glyphicon glyphicon-trash' aria-hidden='true' style='margin-right:5px;'></span>" +
									"Delete" +
								"</button>" +
							"</td>" +
						"</tr>" +
						"<tr class='contact-row'>" +
							"<td>Last name:</td><td><strong>" + lastName + "</strong></td>" +
							"<td class='contact-action-column'>" +
								"<button class='contact-action-button' title='Get contact in VCARD from by calling the /example/contact/vcard/{id} endpoint with the contacts ID as the parameter' type='button' onclick='logGet(\"" + getUrlPrefix() + "/example/contact/vcard/" + id + "\"); window.location.href=\"" + getUrlPrefix() + "/example/contact/vcard/" + id + "\"'>" +
									"<span class='glyphicon glyphicon-download' aria-hidden='true' style='margin-right:5px;'></span>" +
									"VCARD" +
								"</button>" +
							"</td>" +
						"</tr>"+
						"<tr class='contact-row'>" +
							"<td>Phone:</td>" +
							"<td colspan='2'>" + phone + "</td>" +
						"</tr>"+
						"<tr class='contact-row'>" +
							"<td>E-mail:</td>" +
							"<td colspan='2'>" + email + "</td>"+
						"</tr>" +
					"</table>";
				return div;
			}
			
			/*
				Get rooth path for Data Services
				
				Since either HTTP connector or SSL connector can be used,
				it is neccessary to decide a correct URL prefix:
					- /{context_name}/data-service for HTTP connector (e.g. /clover/data-service (default))
					- /data-service for SSL connector
			*/
			function getUrlPrefix() {
				var pathname = pathname = window.location.pathname;
				var dataService = "data-service";
				return pathname.substring(0, pathname.indexOf(dataService) + dataService.length);
			}
					
			function logHttp(settings, jqXHR) {
				var message = settings.type + " " + settings.url + " : " + jqXHR.status + " " + jqXHR.statusText;
				appendLog(message);
			}
			
			function logGet(url) {
				var message = "GET" + " " + url;
				appendLog(message);
			}
			
			function appendLog(message) {
				var log = getTime() + " " + message;
				var logger = $("#http-log");
				if (logger.val().length > 0) {
					log = "\n" + log;
				}
				logger.val(logger.val() + log);
				scrollLogDown();
			}
			
			function getTime() {
				var date = new Date();
				return strPad(date.getHours()) + ":" + strPad(date.getMinutes()) + ":" + strPad(date.getSeconds());
			}
			
			function strPad(n){
				return n < 10 ? "0" + n : n;
			}
			
			function scrollLogDown() {
				var logger = $("#http-log");
				logger.scrollTop(logger[0].scrollHeight);
			}
			
			$(document).ready(function() {
				$("#log-panel").on("shown.bs.collapse", function (event) {
					scrollLogDown();
				})	
			});
			
		</script>
	</head>

	<body onload="fetchContacts();">
		<div class="top-bar">
			<div class="container">
					<a href="http://www.cloverdx.com" target="_blank">
						<img class="logo" src="../../example/html/logo-cloverdx-white.png" />
					</a>
			
					<h3>Data Services Example</h3>
					<div style="clear:both;"></div>
			</div>
		</div>
		<div class="content">
			<div class="container">

				<div class="row">
					<div class="col-md-12">
						<span class="contact" style="display: inline-block;">
							<img src="img/info.png" style="margin: 10px; float: left; height:24px;"/>
							<span style="margin: 15px 0;" >This application is a simple contact database. Its complete functionality is provided by published Data Service jobs. On the left-hand side, Data Service job gets data from the database and web page creates the list of contacts. Web forms on the right-hand side send data to the Data Service jobs which save contacts to the database.</span>
						</span>
						<div class="row">
							<div id="contacts-list" class="col-md-6">
							</div>
							<div class="col-md-6">
								<div class="action-panel">
									<div class="action-panel-header">
										Add contact
									</div>
									<div>
										<form id="contact-form">
											<table>
												<tr>
													<td class="contact-form-label">First Name</td>
													<td class="contact-form-field">
														<input type="text" id="first-name" placeholder="First Name" name="first-name" tabindex="1"/>
													</td>
													<td class="contact-form-label">Phone*</td>
													<td class="contact-form-field">
														<input type="text" id="phone" placeholder="999-999-999" name="phone" tabindex="3"/>
													</td>
												</tr>
												<tr>	
													<td class="contact-form-label">Last Name</td>
													<td class="contact-form-field">
														<input type="text" id="last-name" placeholder="Last Name" name="last-name" tabindex="2"/>
													</td>
													<td class="contact-form-label">E-mail*</td>
													<td class="contact-form-field">
														<input type="text" id="email" placeholder="someone@example.com" name="email" tabindex="4"/>
													</td>
												</tr>
											</table>
										</form>
										<div style="text-align:center">
											<input type="button" title="Create new contact sending a POST request to /example/contact with the input data as form parameters in the request body" value="Add contact" onclick="createContact();"/>
										</div>
									</div>
								</div>
								<div class="action-panel">
									<div class="action-panel-header">
										Import VCARD
									</div>
									<div style="padding:10px 10px 5px 10px;">
										<textarea id="vcard-content" rows="8" 
										placeholder=
										"BEGIN:VCARD
VERSION:3.0
FN:John Green
TEL;TYPE=WORK,VOICE:555-555-757
EMAIL:john.green@example.com
END:VCARD"></textarea>
									</div>
									<div style="text-align:center">
										<input type="button" title="Send a PUT request to /example/contact/vcard with VCARD in plaintext format as the request body" value="Import contact" onclick="importVcard();"/>
									</div>
									
								</div>
								<div id="log-panel" class="action-panel">
									<div id="log-header" class="action-panel-header">
										<a href="#log-body" data-toggle="collapse" class="collapsed">Log</a>
										<span class="text">Show log of all requests being sent by this page</span>
									</div>
									<div id="log-body" class="collapse">
										<textarea id="http-log" rows="8" readonly></textarea>
									</div>
								</div>
							</div><!--column-->
						</div><!--row-->
					</div><!--column-->	
				</div><!--row-->
			</div><!--container-->
		</div><!--content-->
		<div class="footer">
			<div class="container" style="text-align: center;">
				<span class="text-muted">CloverDX created by <a href="http://www.javlin.eu" target="_blank">Javlin</a> All rights reserved.</span>
			</div>
		</div>
	</body>

</html>
